<h3>Tooltip positioning tests</h3>

<form id="default">
	<div class="my-3">
		<button class="btn btn-outline-secondary mx-1" id="flex-start" (click)="setPosition('start')">Left</button>
		<button class="btn btn-outline-secondary mx-1" id="flex-center" (click)="setPosition('center')">Center</button>
		<button class="btn btn-outline-secondary mx-1" id="flex-end" (click)="setPosition('end')">Right</button>
	</div>
	<div class="d-flex {{ flexPosition }}">
		<div class="d-flex flex-column">
			<button
				id="btn-normal"
				type="button"
				container="body"
				triggers="click"
				class="btn btn-outline-secondary"
				placement="auto"
				[ngbTooltip]="content"
			>
				Normal tooltip
			</button>

			<button
				id="btn-innerHtml"
				type="button"
				container="body"
				triggers="click"
				class="btn btn-outline-secondary"
				[placement]="['top', 'top-start', 'top-end']"
				[ngbTooltip]="tooltipHtml"
			>
				InnerHtml
			</button>

			<button
				id="btn-body-off"
				type="button"
				container="body"
				triggers="click"
				class="btn btn-outline-secondary"
				placement="auto"
				[ngbTooltip]="content"
			>
				body off
			</button>
			<button
				id="btn-default"
				type="button"
				container="body"
				triggers="click"
				class="btn btn-outline-secondary"
				placement="start start-top start-bottom"
				[ngbTooltip]="content"
			>
				Default placement
			</button>
		</div>
		<ng-template #tooltipHtml><div [innerHtml]="content"></div></ng-template>
	</div>
	<div class="m-3">
		<button
			id="btn-fixed"
			type="button"
			triggers="click"
			class="btn btn-outline-secondary position-fixed"
			[placement]="['top', 'top-start', 'top-end']"
			[ngbTooltip]="tooltipHtml"
			[ngStyle]="{ left: fixedPositionLeft, right: fixedPositionRight }"
		>
			Fixed
		</button>
	</div>
</form>
